<template>
    <div class="navigation" id="navigation">
        <Layout>
            <Content :style="{height: '100%'}">
                <Layout class="box">
                    <Sider hide-trigger :style="{background: '#fff'}">
                        <Menu :active-name="selectedMenu" width="auto" :open-names="['系统设置','个人中心']" @on-select="changeMenu">
                            <Submenu v-show="menu.show&&hasMenuPermission(menu.code, 5)" :name="menu.title" :key="index" v-for="(menu,index) in menuOpt">
                                <template slot="title">
                                    <Icon :type="menu.icon" size=16></Icon>
                                    {{menu.title}}
                                </template>
                                <MenuItem v-if="hasMenuPermission(item.code, 7)" :key="ind" v-for="(item,ind) in menu.children" :name="item.path">{{item.title}}</MenuItem>
                            </Submenu>
                        </Menu>
                    </Sider>
                    <Layout :style="{padding: '0 24px 0px'}">
                        <Breadcrumb :style="{margin: '24px 0'}">
                            <Icon type="arrow-right-b"></Icon>
                            <BreadcrumbItem>{{rootMenu?rootMenu:'系统设置'}}</BreadcrumbItem>
                            <BreadcrumbItem :to="selectedMenu">{{lastMenu?lastMenu:'角色管理'}}</BreadcrumbItem>
                        </Breadcrumb>
                        <Content :style="{padding: '24px', background: '#fff'}">
                            <router-view></router-view>
                        </Content>
                    </Layout>
                </Layout>
            </Content>
        </Layout>
    </div>
</template>

<script type="text/ecmascript-6">
    // import router from '../router'
    export default {
        data () {
            return {
                menuOpt: [
                    {
                        code: '10101',
                        show: true,
                        title: '系统设置',
                        icon: 'gear-b',
                        children: [
                            {path: '/functionView', title: '功能查看', code: '1010101'},
                            {path: '/role', title: '角色管理', code: '1010102'},
                            {path: '/employee', title: '员工管理', code: '1010104'},
                            {path: '/duty', title: '职能管理', code: '1010103'},
                            {path: '/log', title: '日志管理', code: '1010105'},
                            {path: '/client', title: '客户管理', code: '1010105'},
                        ]
                    }, {
                        code: '10102',
                        show: true,
                        title: '个人中心',
                        icon: 'person',
                        children: [
                            {path: '/user', title: '我的主页', code: '1010201'},
                            {path: '/setting', title: '我的消息', code: '1010202'},
                        ]
                    }
                ],

            }
        },
        watch: {
        },
        computed: {
            selectedMenu: function () {
                return this.$store.state.login.currentPath
            },
            rootMenu: function () {
                let newVal = this.selectedMenu
                // console.log(newVal)
                let menus = this.menuOpt.find(menus => menus.children.find(menu => menu.path===newVal))
                if (menus) {
                    return menus.title
                } else if (newVal&&(newVal.substr(0,9)==='/password')) {
                    return ''
                } else if (newVal&&(newVal.substr(0,9)==='/editRole'||newVal.substr(0,9)==='/copyRole')) {
                    return '系统设置'
                }
            },
            lastMenu: function () {
                let newVal = this.selectedMenu
                let menus = this.menuOpt.find(menus => menus.children.find(menu => menu.path===newVal))
                if (menus) {
                    return menus.children.find(menu => menu.path===newVal).title
                } else if (newVal&&(newVal.substr(0,9)==='/password')) {
                    return '修改密码'
                } else if (newVal&&(newVal.substr(0,9)==='/editRole'||newVal.substr(0,9)==='/copyRole')) {
                    return '角色管理'
                }
            }
        },
        methods: {
            hasMenuPermission(permission, len) {
                return this.$store.getters['login/hasMenuPermission'](permission, len);
            },
            // 菜单改变时，改变路由名称
            changeMenu(menu) {
                this.$router.push(menu)
            },
            // 设置公共样式
            setStyle() {
                let height = window.innerHeight - 51.7 - 55 // 窗口总高度 去掉头和脚高度
                document.querySelector('.ivu-layout').style.height = height + 'px'
                document.querySelector('.box').style.height = height  + 'px'
            }
        },
        mounted () {
            this.setStyle() // 设置窗口高度
            this.$store.commit('login/setCurrentPath', this.$router.currentRoute.fullPath)
        }
    }
</script>

<style scoped lang="scss">

</style>
